<template>
  <base-page title="云圈" :comment-data="tableData">
    <!-- 展示留下友链的格式要求 -->
    <!-- 最多展示 50 个，超过 50 个，显示更多按钮 -->
    <main>
      <div
        class="blogroll-item"
        v-for="(item, index) in blogrolls"
        :key="index"
      >
        <div
          :style="{
            background: `url(${item.cover}) center no-repeat`,
            backgroundSize: 'cover',
            width: '50px',
            height: '50px',
            display: 'inline-block',
            verticalAlign: 'top'
          }"
        ></div>
        <section>
          <h2 class="title text1-col mt5">{{ item.name }}</h2>
          <p class="descr text1-col">{{ item.descr }}</p>
        </section>
      </div>
    </main>
  </base-page>
</template>

<script>
import BasePage from "@/components/BasePage/index.vue";

export default {
  name: "Blogroll",
  components: {
    BasePage
  },
  data() {
    return {
      tableData: [
        {
          id: 1,
          img: "https://q.qlogo.cn/g?b=qq&nk=704729872&s=40",
          username: "曾小晨",
          content:
            "月亮很美月亮很美月亮很美月亮很美月亮很美月亮很美月亮很美月亮很美月亮很美" +
            "月亮很美月亮很美月亮很美月亮很美月亮很美月亮很美月亮很美月亮很美月亮很美月亮很美月亮" +
            "很美月亮很美月亮很美月亮很美月亮很美月亮很美月亮很美月亮很美月亮很美月亮很美月亮很美" +
            "月亮很美月亮很美月亮很美月亮很美",
          time: Date.now(),
          children: [
            {
              id: 2,
              parentId: 1, // 回复的父级ID
              brotherId: null, // 回复的兄弟ID
              replyUserName: "隔壁泰山",
              img: "https://q.qlogo.cn/g?b=qq&nk=704729872&s=40",
              username: "曾小晨",
              content: "哪里美....",
              time: Date.now()
            }
          ]
        },
        {
          id: 1,
          img: "https://q.qlogo.cn/g?b=qq&nk=704729872&s=40",
          username: "曾小晨",
          content: "路过",
          time: Date.now(),
          children: []
        }
      ],
      blogrolls: [
        {
          cover:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          name: "曾小车曾小车曾小车曾小车曾小车",
          descr: "博客人"
        },
        {
          cover:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          name: "曾小车",
          descr: "博客人"
        },
        {
          cover:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          name: "曾小车",
          descr: "博客人"
        },
        {
          cover:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          name: "曾小车",
          descr: "博客人"
        },
        {
          cover:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          name: "曾小车",
          descr: "博客人"
        },
        {
          cover:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          name: "曾小车",
          descr: "博客人"
        }
      ]
    };
  }
};
</script>

<style lang="scss" scoped>
.blogroll-item {
  height: 50px;
  width: 32%;
  margin-bottom: 2%;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  &:not(:nth-child(3n)) {
    margin-right: 2%;
  }
  section {
    font-size: 0;
    display: inline-block;
    vertical-align: top;
    height: 100%;
    background: #fff;
    padding-left: 5px;
    width: calc(100% - 50px);
    line-height: normal;
  }
  .title {
    font-weight: 500;
    color: #a0a0a0;
    font-size: 14px;
  }
  .descr {
    color: #a0a0a0;
    font-size: 13px;
  }
}
main {
  display: flex;
  flex-wrap: wrap;
}
.text1-col {
  width: 100%;
}
</style>
